<template>
  <div>
    <div v-show="!isShowFlowDetail">
      <jxf-titletip :title="title"></jxf-titletip>
      <el-card class="mt20">
        <el-form :inline="true" :model="settlementInfo" ref="settlementInfo">
          <el-form-item label="流水编号:" prop="productName">
            <el-input v-model="settlementInfo.productName"></el-input>
          </el-form-item>
          <el-form-item label="结算事项:" prop="productName">
            <el-select v-model="settlementInfo.status" clearable placeholder="全部">
              <el-option label="入账" value="0"></el-option>
              <el-option label="出账" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="结算时间段:" prop="productName">
            <el-input v-model="settlementInfo.productName"></el-input>
          </el-form-item>
          <el-form-item label="摘要:" prop="productName">
            <el-select v-model="settlementInfo.status" clearable placeholder="全部">
              <el-option label="订单结算" value="0"></el-option>
              <el-option label="转出结算" value="1"></el-option>
              <el-option label="转出保理手续费" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch()">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="resetForm('settlementInfo')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="jxf-table-card mt20">
        <div slot="header" class="clearfix">
          <span>数据列表</span>
          <div>
            <el-button type="primary">导出</el-button>
          </div>
        </div>
        <jxf-table class="" :table="settlementTable">
          <template slot="operation" slot-scope="account">
            <el-button type="text" @click="watchDetail">查看详情</el-button>
          </template>
        </jxf-table>
      </el-card>
      <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
    </div>
    <FlowDetail v-if="isShowFlowDetail"></FlowDetail>
  </div>
</template>

<script>
  import FlowDetail from './FlowDetail'
  export default {
    name: "supplierSettlementAcountFlow",
    components: { FlowDetail },
    props: {

    },
    data() {
      return {
        title: this.$route.params && this.$route.params.title ? this.$route.params.title : "供应商余额账户流水",
        settlementInfo: {},
        isShowFlowDetail: false,
        settlementTable: {
          border:true,
          loading:false,
          hasSelect:false,
          hasOperation:false,
          tr: [
            {
              id: '1',
              label: '流水编号',
              prop: 'number'
            },
            {
              id: '2',
              minWidth: '100',
              label: '供应商账号',
              prop: 'orderNo'
            },
            {
              id: '3',
              minWidth: '140',
              label: '供应商企业名称',
              prop: 'address'
            },
            {
              id: '4',
              label: '结算事项',
              prop: 'settlementAccount',
              show: 'template'
            },
            {
              id: '5',
              label: '结算金额',
              prop: 'accountBalance',
              show: 'template'
            },
            {
              id: '6',
              label: '摘要',
              show: 'template',
              prop: 'status'
            },
            {
              id: '7',
              label: '结算时间',
              show: 'template',
              prop: 'status'
            },
            {
              id: '8',
              minWidth: '140',
              label: '供应商余额账户',
              prop: 'status'
            },
            {
              id: '9',
              label: '操作',
              show: 'template',
              minWidth:"200",
              prop: 'operation'
            }
          ],
          operation: [],
          data: []
        },
        pageTotal:40,
        pageSize:10,
        currentPage:1
      }
    },
    methods: {
      onSearch() {
        this.settlementTable.data = this.getData(this.settlementInfo)
        this.settlementTable.loading = false
      },
      getData(info) {
        this.settlementTable.loading = true;
        return [{
          number: "222222"
        }]
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      watchDetail() {
        this.isShowFlowDetail = true;
      },
      // 切换页面
      currentPageChange(pageNo) {
        this.currentPage = pageNo
      },
      // 切换页面条数
      pageSizeChange(pageNo) {
        this.pageSize = pageNo
      },
    }
  }
</script>

<style scoped>

</style>
